<template>
	<div>
		<div class="container">
			<div class="handle-box">
				<el-row>
					<el-input v-model="query.orderNumber" placeholder="订单号" class="handle-input mr10"></el-input>
					<el-input v-model="query.goodsName" placeholder="商品名称" class="handle-input mr10"></el-input>
					<el-input v-model="query.sellerName" placeholder="卖家" class="handle-input mr10"></el-input>
					<el-input v-model="query.userName" placeholder="收货人" class="handle-input mr10"></el-input>
					<el-select v-model="query.orderState" placeholder="订单状态" class="handle-select mr10">
						<el-option key="1" label="未发货" value="未发货"></el-option>
						<el-option key="2" label="已发货" value="已发货"></el-option>
					</el-select>
					<el-select v-model="query.receivingState" placeholder="收货状态" class="handle-select mr10">
						<el-option key="1" label="未收货" value="未收货"></el-option>
						<el-option key="2" label="已收货" value="已收货"></el-option>
					</el-select>
					<el-button type="primary" :icon="Search" @click="handleSearch">查询</el-button>
				</el-row>
			</div>
			<el-table :data="tableData" border class="table" ref="multipleTable" header-cell-class-name="table-header">
				<el-table-column prop="orderNumber" label="订单号" width="110" align="center"></el-table-column>
				<el-table-column prop="goodsName" label="商品名称" width="100" align="center"></el-table-column>
				<el-table-column prop="sellerName" label="卖家" width="100" align="center"></el-table-column>
				<el-table-column prop="amount" label="商品数量" width="100" align="center"></el-table-column>
				<el-table-column prop="orderTime" label="下单时间" width="160" align="center"></el-table-column>
				<el-table-column prop="payTime" label="付款时间" width="160" align="center"></el-table-column>
				<el-table-column prop="orderState" label="订单状态" width="100" align="center"></el-table-column>
				<el-table-column prop="address" label="收货地址" width="200" align="center"></el-table-column>
				<el-table-column prop="phoneNum" label="手机号" width="120" align="center"></el-table-column>
				<el-table-column prop="userName" label="收货人" width="100" align="center"></el-table-column>
				<el-table-column prop="receivingState" label="收货状态" width="100" align="center"></el-table-column>
				<el-table-column prop="receivingTime" label="收货时间" width="160" align="center"></el-table-column>
				<el-table-column prop="notes" label="备注" width="210" align="center"></el-table-column>
				<el-table-column label="操作" width="200" align="center">
					<template #default="scope">
						<el-button text :icon="Edit" class="aquamarine" @click="handleEdit(scope.$index, scope.row)">
							编辑
						</el-button>
						<el-button text :icon="Delete" class="red" @click="handleDelete(scope.row)">
							删除
						</el-button>
					</template>
				</el-table-column>
			</el-table>
			<!-- 分页 current-page、page-size（每页条数）、total（总条数） -->
			<div class="pagination">
				<el-pagination background layout="total, prev, pager, next" :current-page="query.pageNum"
					:page-size="query.pageSize" :total="pageTotal" @current-change="handlePageChange"></el-pagination>
			</div>
		</div>

		<!-- 编辑弹出框 -->
		<el-dialog :title="dialogTitle" v-model="editVisible" width="30%">
			<el-form label-width="70px">
				<el-form-item label="订单号">
					<el-input v-model="form.orderNumber" :disabled="true"></el-input>
				</el-form-item>
				<el-form-item label="商品数量">
					<el-input v-model="form.amount"></el-input>
				</el-form-item>
				<el-form-item label="收货地址">
					<el-input v-model="form.address"></el-input>
				</el-form-item>
				<el-form-item label="手机号">
					<el-input v-model="form.phoneNum"></el-input>
				</el-form-item>
				<el-form-item label="收货人">
					<el-input v-model="form.userName"></el-input>
				</el-form-item>
				<el-form-item label="备注">
					<el-input v-model="form.notes" type="textarea" :rows="3"></el-input>
				</el-form-item>
			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="editVisible = false">取 消</el-button>
					<el-button type="primary" @click="saveEdit">确 定</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>
<script setup lang="ts" name="basetable">
import { ref, reactive } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { Delete, Edit, Search, Plus } from '@element-plus/icons-vue';
import { getImageUrl } from '../utils/index';
import http from '../utils/request'
interface TableItem {
	orderNumber: number,
	goodsName: string,
	sellerName: string,
	amount: number,
	orderTime: Date,
	orderState: string,
	address: string,
	phoneNum: string,
	userName: string,
	receivingState: string,
	receivingTime: Date,
	notes: string,
	payTime: string,
}
const query = reactive({
	orderNumber: '',//根据订单号查询
	goodsName: '',//根据商品名称查询
	sellerName: '',//根据卖家姓名查询
	orderState: '',//根据订单状态查询
	userName: '',
	receivingState: '',
	pageNum: 1,
	pageSize: 10
});
//要显示的数据
const tableData = ref<TableItem[]>([]);
const pageTotal = ref(0);
// 获取表格数据
const getData = () => {
	http.get("/admin/order", {
		params: query
	}).then((res: any) => {
		console.log('查询成功！！！')
		console.log('获取订单信息 res = ', res)
		tableData.value = res.data.data.list;
		pageTotal.value = res.data.data.total;
	}).catch((err: any) => {
		console.log('获取订单信息 res = ', err)
	})
};
getData();
// 查询操作
const handleSearch = () => {
	query.pageNum = 1;
	getData();
};
// 分页导航
const handlePageChange = (val: number) => {
	query.pageNum = val;
	getData();
};

// 删除操作
const handleDelete = (row: any) => {
	// 二次确认删除
	ElMessageBox.confirm(`确定要删除订单【${row.orderNumber}】吗？`, '提示', {
		type: 'warning'
	})
		.then(() => {//用户点击确定按钮
			http.delete("/admin/order/" + row.orderNumber)
				.then((res) => {
					console.log('删除返回值：', res);
					if (res.data.code === 200) {	//修改成功
						ElMessage.success(`删除成功`);
						getData();
					}
				}).catch((err) => {
					console.log('修改失败：', err);
					ElMessage.error(`修改失败`);
				});
		})
		.catch(() => {//点击取消按钮

		});
};
// 表格编辑时弹窗和保存
const dialogTitle = ref('编辑');
const editVisible = ref(false);
let form = reactive({
	orderNumber: '',
	amount: '',
	address: '',
	phoneNum: '',
	userName: '',
	notes: '',
});
//修改
const handleEdit = (index: number, row: any) => {
	dialogTitle.value = "编辑";
	form.orderNumber = row.orderNumber;
	form.amount = row.amount;
	form.address = row.address;
	form.phoneNum = row.phoneNum;
	form.userName = row.userName;
	form.notes = row.notes;
	editVisible.value = true;
};
//保存修改
const saveEdit = () => {
	console.log('修改', form);
	http.put("/admin/order", form)
		.then((res) => {
			console.log('修改返回值：', res);
			if (res.data.code === 200) {	//修改成功
				ElMessage.success(`修改成功`);
				editVisible.value = false;
				getData();
			}
		}).catch((err) => {
			console.log('修改失败：', err);
			ElMessage.error(`修改失败`);
		});
};
</script>

<style scoped>
.handle-box {
	margin-bottom: 20px;
}

.handle-select {
	width: 150px;
}

.handle-input {
	width: 150px;
}

.table {
	width: 100%;
	font-size: 14px;
}

.red {
	color: #ff0000;
}

.aquamarine {
	color: aquamarine
}

.mr10 {
	margin-right: 10px;
}
.table-td-thumb {
	display: block;
	margin: auto;
	width: 40px;
	height: 40px;
}
</style>
